<template>
<div id="app" >
    <h2 >每日记事本</h2> 
    <input type="text" v-model="input" style="padding-left:100px; width:150px" placeholder="按回车确定"  @keyup.enter="add"/>
    <ul class="lists">
      <li v-for="(item, index) in list" :key="item" >
        <div>
          <!-- checkbox选中触发事件 -->
          <input type="checkbox" v-model="item.status" />
          <span v-bind:class="{Class: item.status }">{{ item.tip }}</span>
          <span class="removes" @click="remove(index)">删除</span>
        </div>
      </li>
    </ul>
    <div>
      <!--filter函数筛选数组里面的对象 -->
      已完成{{ list.length -list.filter((item) => !item.status).length}} /{{list.length}}
    </div>
     <button @click="allremove">删除全部内容</button>
 
</div>
</template>

<script>
export default {
  name: "IndeWork",
  data() {
    return {
      input: "",
      list: [
        {
          tip: "吃饭",
          status: false,
        },
        {
          tip: "学习",
          status: false,
        },
        {
          tip: "睡觉",
          status: false,
        },
         {
          tip: "听课",
          status: false,
        },
      ],
    };
  },
  methods: {
    add() {
      this.list.push(
        {
        tip: this.input,
        status: false,}
        );
      this.input = "";
    },
    remove(index) {
      this.list.splice(index, 1);
    },
    allremove() {
      this.list = this.list.filter((item) => !item.status);
    },
  },
};
</script>

<style scoped>
li {
  list-style: none;
  height: 30px;
}
.box{
  width: 300px;
}
.removes{
  padding-left:100px; 
  padding-top:0px;
}

</style>